* {
    margin: 0;
    padding: 0;
}

body {
    background: #000;
    width: 1350px;
}

.wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.container {
    width: 800px;
    height: 200px;
    margin: 200px auto;
    /*background: #000000;*/

    position: relative;
}

.eyesBoxs {
    width: 130px;
    height: 70px;
    position: absolute;
    top: 50px;
}

.pullLeft {
    top: 60px;
    left: 225px;
}

.pullRight {
    top: 60px;
    right: 10px;
}

.profile {
    width: 130px;
    height: 70px;
    /*background: #fff;*/

    position: absolute;
    top: 0;
    left: 0;
    /*border-radius: 0 70px 0 50px;*/
}

/*.shadow {
        display: block;
        width: 130px;
        height: 70px;
        position: absolute;
        top: 0;
        z-index: 5;
        border-radius: 0 90px 0 60px;
        box-shadow: 5px 12px 2px 5px rgba(0, 0, 0, .25) inset;
    }*/

.skewLeft {
    border-radius: 10px 180px 25px 50px;
    transform: skew(20deg, 5deg);
    -webkit-transform: skew(20deg, 1deg);
}

.skewRight {
    border-radius: 0 100px 10px 140px;
    transform: skew(-10deg, -1deg) scale(-1, 1);
    -webkit-transform: skew(-10deg, 1deg) scale(-1, 1);
    -o-transform: scale(-1, 1);
}

.basic {
    width: 60px;
    height: 60px;
    background: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 10;
    margin-top: -30px;
    border-radius: 60%;
}

.basic:before {
    content: "";
    display: block;
    width: 10px;
    height: 11px;
    position: absolute;
    left: 15px;
    top: 15px;
    z-index: 100;
    border-radius: 60%;
    background-image: radial-gradient(circle, rgb(225, 225, 225), rgb(225, 225, 225), rgba(225, 225, 225, 0.9), rgba(225, 225, 225, 0.3));
    -webkit-background-image: radial-gradient(circle, rgb(225, 225, 225), rgb(225, 225, 225), rgba(225, 225, 225, 0.9), rgba(225, 225, 225, 0.3));
    -o-background-image: radial-gradient(circle, rgb(225, 225, 225), rgb(225, 225, 225), rgba(225, 225, 225, 0.9), rgba(225, 225, 225, 0.3));
}

.pullLeft .basic {
    margin-left: -33px;
}

.pullRight .basic {
    margin-left: -27px;
}

.eyes {
    width: 55px;
    height: 55px;
    background: #ff0000;
    position: absolute;
    top: 8px;
    border-radius: 60%;
    box-shadow: 0 0 2px 4px #bd0000 inset, 0 0 0 2px #000;
}

.pullLeft .eyes {
    left: 35px;
}

.pullRight .eyes {
    right: 35px;
}

.eyes .line {
    width: 64%;
    height: 64%;
    background: #ff0000;
    position: absolute;
    right: 0;
    left: 0;
    top: 10px;
    margin: 0 auto;
    border-radius: 60%;
    box-shadow: 0 0 2px 0 #b20000 inset;
}

.eyes .line:before {
    content: "";
    display: block;
    width: 10px;
    height: 11px;
    position: absolute;
    left: 3px;
    top: 4px;
    z-index: 100;
    border-radius: 60%;
    background-image: radial-gradient(circle, rgb(225, 225, 225), rgb(225, 225, 225), rgba(225, 225, 225, 0.7), rgba(225, 225, 225, 0.3));
    -webkit-background-image: radial-gradient(circle, rgb(225, 225, 225), rgb(225, 225, 225), rgba(225, 225, 225, 0.7), rgba(225, 225, 225, 0.3));
    -o-background-image: radial-gradient(circle, rgb(225, 225, 225), rgb(225, 225, 225), rgba(225, 225, 225, 0.7), rgba(225, 225, 225, 0.3));
}

.eyes .line:after {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    background: #000;
    right: 0;
    left: -1px;
    top: 13px;
    z-index: 100;
    margin: 0 auto;
    border-radius: 60%;
    transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    -o-transform: rotate(150deg);
    animation: colour 20s ease-in infinite;
    -webkit-animation: colour 20s ease-in infinite;
    -o-animation: colour 20s ease-in infinite;
}

@keyframes colour {
    0% {
        background: #000;
    }

    35% {
        background: #000;
    }

    40% {
        background: #f00;
    }

    100% {
        background: #f00;
    }
}

@-webkit-keyframes colour {
    0% {
        background: #000;
    }

    35% {
        background: #000;
    }

    40% {
        background: #f00;
    }

    100% {
        background: #f00;
    }
}

@-o-keyframes colour {
    0% {
        background: #000;
    }

    35% {
        background: #000;
    }

    40% {
        background: #f00;
    }

    100% {
        background: #f00;
    }
}

/*******三勾玉 开始*******/

.hook {
    width: 92%;
    height: 92%;
    position: absolute;
    right: 0;
    left: 0;
    top: 5%;
    margin: 0 auto;
    border-radius: 60%;
}

.hook .bar {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 60%;
}

.hook .bar b {
    display: block;
    width: 8px;
    height: 8px;
    background: #000;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 60%;
}

.hook .bar b:after {
    content: "";
    width: 8px;
    height: 8px;
    border-color: transparent transparent #000 transparent;
    border-style: solid;
    border-width: 0 0 5px 0;
    position: absolute;
    top: -1px;
    left: -3px;
    z-index: 100;
    border-radius: 0 0 0 70%;
    transform: rotate(-75deg);
    -webkit-transform: rotate(-75deg);
    -o-transform: rotate(-75deg);
}

.hook .bar:nth-child(1) {
    transform: rotate(10deg);
    -webkit-transform: rotate(10deg);
    -o-transform: rotate(10deg);
}

.hook .bar:nth-child(2) {
    transform: rotate(130deg);
    -webkit-transform: rotate(130deg);
    -o-transform: rotate(130deg);
}

.hook .bar:nth-child(3) {
    transform: rotate(250deg);
    -webkit-transform: rotate(250deg);
    -o-transform: rotate(250deg);
}

/*******三勾玉 结束********/
/*******万花筒 开始*******/

.tube {
    width: 93%;
    height: 93%;
    position: absolute;
    right: 0;
    left: 0;
    top: 2px;
    margin: 0 auto;
    background: #000;
    border-radius: 60%;
}

.tube .bar {
    display: block;
    width: 10px;
    height: 20px;
    border-style: solid;
    border-width: 0 0 0 10px;
    border-color: transparent transparent transparent black;
    position: absolute;
    border-radius: 100% 0 0 0;
}

.tube .bar:nth-child(1) {
    top: -10px;
    left: 2px;
    transform: rotate(-10deg);
    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
}

.tube .bar:nth-child(2) {
    bottom: 0;
    right: -10px;
    transform: rotate(105deg);
    -webkit-transform: rotate(105deg);
    -moz-transform: rotate(105deg);
}

.tube .bar:nth-child(3) {
    bottom: -3px;
    left: -10px;
    transform: rotate(235deg);
    -webkit-transform: rotate(235deg);
    -moz-transform: rotate(235deg);
}

/*******万花筒 结束*******/
/*******轮回眼 开始*******/

.trans {
    width: 130px;
    height: 70px;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    border-radius: 0 50px 0 20px;
}

.trans .bar {
    display: block;
    width: 9px;
    height: 9px;
    background: #000;
    position: absolute;
    top: 50%;
    z-index: 2;
    margin: -4px 0 0 -4px;
    border-radius: 60%;
}

.trans .bar:after {
    content: "";
    display: block;
    width: 11px;
    height: 12px;
    position: absolute;
    top: -13px;
    left: -13px;
    z-index: 100;
    border-radius: 60%;
    background: rgba(250, 250, 250, 85);
}

.pullLeft .trans .bar {
    transform: skewX(-15deg);
    -webkit-transform: skewX(-15deg);
    -o-transform: skewX(-15deg);
}

.pullLeft .trans .bar {
    left: 48%;
}

.pullRight .trans .bar {
    transform: skewX(-15deg) scale(-1, 1);
    -webkit-transform: skewX(-15deg) scale(-1, 1);
    -o-transform: skewX(-15deg) scale(-1, 1);
}

.pullRight .trans .bar {
    right: 48%;
}

/*******轮回眼 结束*******/
/*基本眼*/

.ani-narrow {
    animation: ani-narrow 20s ease-out infinite;
    -webkit-animation: ani-narrow 20s ease-out infinite;
    -o-animation: ani-narrow 20s ease-out infinite;
}

@keyframes ani-narrow {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    6% {
        opacity: 1;
        transform: scale(1);
    }

    8% {
        opacity: 0;
        transform: scale(0);
    }

    87% {
        opacity: 0;
        transform: scale(0);
    }

    90% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes ani-narrow {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }

    5% {
        opacity: 1;
        -webkit-transform: scale(1);
    }

    8% {
        opacity: 0;
        -webkit-transform: scale(0);
    }

    87% {
        opacity: 0;
        -webkit-transform: scale(0);
    }

    90% {
        opacity: 1;
        -webkit-transform: scale(1);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

/*红色眼*/

.ani-zoom {
    animation: ani-zoom 20s linear infinite;
    -webkit-animation: ani-zoom 20s linear infinite;
    -o-animation: ani-zoom 20s linear infinite;
}

@keyframes ani-zoom {
    0% {
        opacity: 0;
        transform: scale(0);
    }

    6% {
        opacity: 0;
        transform: scale(0);
    }

    7% {
        opacity: 1;
        transform: scale(1);
    }

    60% {
        opacity: 1;
        transform: scale(1);
    }

    62% {
        opacity: 0;
        transform: scale(1.5);
    }

    100% {
        opacity: 0;
        transform: scale(0);
    }
}

@-webkit-keyframes ani-zoom {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
    }

    5% {
        opacity: 0;
        -webkit-transform: scale(0);
    }

    6% {
        opacity: 1;
        -webkit-transform: scale(1);
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(1);
    }

    62% {
        opacity: 0;
        -webkit-transform: scale(1.5);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(0);
    }
}

/*三勾玉*/

.ani-rotateHook {
    animation: ani-rotateHook 20s ease-in infinite;
    -webkit-animation: ani-rotateHook 20s ease-in infinite;
    -o-animation: ani-rotateHook 20s ease-in infinite;
}

@keyframes ani-rotateHook {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0);
    }

    10% {
        opacity: 0;
        transform: scale(0) rotate(0);
    }

    13% {
        opacity: 1;
        transform: scale(1) rotate(-2600deg);
    }

    20% {
        opacity: 1;
        transform: scale(1) rotate(-2600deg);
    }

    35% {
        opacity: 1;
        transform: scale(1) rotate(-5000deg);
    }

    38% {
        opacity: 0;
        transform: scale(0.6) rotate(-6400deg);
    }

    100% {
        opacity: 0;
        transform: scale(0) rotate(0);
    }
}

@-webkit-keyframes ani-rotateHook {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(0);
    }

    10% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(0);
    }

    13% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(-2600deg);
    }

    20% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(-2600deg);
    }

    35% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(-5000deg);
    }

    38% {
        opacity: 0;
        -webkit-transform: scale(0.6) rotate(-6400deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(0);
    }
}

/*万花筒*/

.ani-rotateTube {
    animation: ani-rotateTube 20s ease-in-out infinite;
    -webkit-animation: ani-rotateTube 20s ease-in-out infinite;
    -o-animation: ani-rotateTube 20s ease-in-out infinite;
}

@keyframes ani-rotateTube {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0);
    }

    35% {
        opacity: 0;
        transform: scale(0) rotate(0);
    }

    45% {
        opacity: 1;
        transform: scale(1) rotate(-1360deg);
    }

    58% {
        opacity: 1;
        transform: scale(1) rotate(-1360deg);
    }

    64% {
        opacity: 0;
        transform: scale(0) rotate(1360deg);
    }

    100% {
        opacity: 1;
        transform: scale(1) rotate(-1360deg);
    }
}

@-webkit-keyframes ani-rotateTube {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(0);
    }

    35% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(0);
    }

    45% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(-1360deg);
    }

    58% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(-1360deg);
    }

    64% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(1360deg);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(-1360deg);
    }
}

/*轮回眼*/

.ani-shadow {
    animation: ani-shadow 20s linear infinite;
    -webkit-animation: ani-shadow 20s linear infinite;
    -o-animation: ani-shadow 20s linear infinite;
}

@keyframes ani-shadow {
    0% {
        opacity: 0;
        box-shadow: none;
    }

    58% {
        opacity: 0;
        box-shadow: none;
    }

    64% {
        opacity: 1;
        box-shadow: 0 0 0 14px #464646, 0 0 0 16px #000, 0 0 0 30px #6c6c6c, 0 0 0 32px #000, 0 0 0 44px #a6a6a6, 0 0 0 46px #000;
    }

    87% {
        opacity: 1;
        box-shadow: 0 0 0 14px #464646, 0 0 0 16px #000, 0 0 0 30px #6c6c6c, 0 0 0 32px #000, 0 0 0 44px #a6a6a6, 0 0 0 46px #000;
    }

    90% {
        opacity: 0;
        box-shadow: none;
    }

    100% {
        opacity: 0;
        box-shadow: none;
    }
}

@-webkit-keyframes ani-shadow {
    0% {
        opacity: 0;
        box-shadow: none;
    }

    58% {
        opacity: 0;
        box-shadow: none;
    }

    64% {
        opacity: 1;
        box-shadow: 0 0 0 14px #464646, 0 0 0 16px #000, 0 0 0 30px #6c6c6c, 0 0 0 32px #000, 0 0 0 44px #a6a6a6, 0 0 0 46px #000;
    }

    87% {
        opacity: 1;
        box-shadow: 0 0 0 14px #464646, 0 0 0 16px #000, 0 0 0 30px #6c6c6c, 0 0 0 32px #000, 0 0 0 44px #a6a6a6, 0 0 0 46px #000;
    }

    90% {
        opacity: 0;
        box-shadow: none;
    }

    100% {
        opacity: 0;
        box-shadow: none;
    }
}

.ani-narrow,
.ani-rotateHook,
.ani-rotateTube,
.ani-shadow,
.ani-zoom,
.eyes .line:after {
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
}
